<template>
  <div id="wdjf">
    <h3>我的积分</h3>
    <p class="pre-jf">
      当前积分：<span>{{ pmsg.jf }}</span>
    </p>
    <table>
      <thead>
        <tr>
          <th>积分日期</th>
          <th>变动</th>
          <th>来源</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in jfgl" :key="index">
          <td>{{ item.xfrq }}</td>
          <td>{{ item.xf }}</td>
          <td>{{ item.ly }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'wdjf',
  computed: {
    ...mapState(['pmsg', 'jfgl', 'goods']),
  },
};
</script>

<style scoped>
#wdjf h3 {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 18px;
  color: #333;
  margin-bottom: 40px;
  font-weight: normal;
}
.pre-jf {
  font-size: 18px;
  color: #666;
  margin-left: 20px;
}
.pre-jf span {
  color: #f08200;
}
table {
  width: 100%;
  height: 420px;
  margin-top: 40px;
  text-align: center;
  border-collapse: collapse;
}
th {
  color: #333;
  font-size: 16px;
  padding-right: 80px;
  padding-left: 20px;
}
td {
  color: #666;
  font-size: 14px;
  padding-right: 80px;
  padding-left: 20px;
}
</style>
